<template>
	<view class="configFontsize">
		<div class="topImg">
      <image src="@/static/main-bg.png" alt="" :lazy-load="true"/>
    </div>
    <div class="shopList" v-if="haveContent">
      <div class="shopMentBox" v-for="(item,index) in shopList" :key="index">
        <div class="sortTitle">{{ item.className }}</div>
        <div class="sortData">
          <div class="outSideBox" v-for="(chr,chrIndex) in item.list" :key="chrIndex">
            <div class="imgBox">
              <image :src="chr.img" alt="" :lazy-load="true"/>
            </div>
            <div class="text">
              {{ chr.name }}
            </div>
          </div>
        </div>
        <div class="lineEvery"></div>
      </div>
    </div>
    <div class="shopList" v-else>
      <u-empty
        mode="list"
        icon="http://cdn.uviewui.com/uview/empty/list.png"
      >
      </u-empty>
    </div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        haveContent: true,
				shopList: [
          {
            className:'一级类目',
            list: [
              {
                name: '电筒',
                img: require('@/static/logo.png')
              },
              {
                name: '电筒',
                img: require('@/static/logo.png')
              },
              {
                name: '电筒',
                img: require('@/static/logo.png')
              },
              {
                name: '电筒',
                img: require('@/static/logo.png')
              }
            ]
          },
          {
            className:'二级类目',
            list: [
              {
                name: '手机',
                img: require('@/static/logo.png')
              },
              {
                name: '手机',
                img: require('@/static/logo.png')
              },
              {
                name: '手机',
                img: require('@/static/logo.png')
              },
              {
                name: '手机',
                img: require('@/static/logo.png')
              },
              {
                name: '手机',
                img: require('@/static/logo.png')
              }
            ]
          },
        ]
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
  @import "@/common/configStyle.scss";

  .configFontsize {
    font-size: $ruyi-config-fontsize;
    width: calc(100% - 15rpx);
    padding-left: 15rpx;
  }
  .topImg {
    width: 100%;
    height: 200rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .shopList {
    margin-top: $ruyi-config-marginTop;
    width: 100%;
    .shopMentBox {
      margin-top: $ruyi-config-marginTop;
      width: 100%;
      .sortTitle {
        font-weight: $ruyi-config-fontWight;
      }
      .sortData {
        display: flex;
        flex-wrap: wrap;
        .outSideBox {
          text-align: center;
          width: 33.3%;
          .imgBox {
            margin: $ruyi-config-marginTop 0;
            width: 100%;
            display: flex;
            justify-content: center;
            image {
              display: block;
              width: 140rpx;
              height: 140rpx;
            }
          }
        }
      }
    }
  }

</style>
